import React, { useState } from 'react';
import { Upload, Button, Modal, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

// 自定义钩子
function useVideoUpload() {
    const [visible, setVisible] = useState(false);
    const [fileList, setFileList] = useState<any[]>([]);

    const handleUpload = () => {
        setVisible(true);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    const handleOk = () => {
        setVisible(false);
        message.success('视频上传成功');
    };

    const beforeUpload = (file: any) => {
        // 在这里可以添加文件类型和大小的校验
        return true;
    };

    const onChange = (info: any) => {
        // 处理文件列表变化
        setFileList(info.fileList);
        //      // 检查文件状态，如果是删除状态，则执行删除操作
        //   if (info.file.status === 'removed') {
        //     // 在这里添加删除文件的逻辑，例如调用后端 API 删除文件
        //     console.log('文件被删除:', info.file);
        //     // 可以在这里调用 API 删除服务器上的文件
    };

    // 从后端获取文件列表
    const fetchFileList = async () => {
        try {
            const response = await fetch('YOUR_BACKEND_API_URL'); // 替换为你的后端 API URL
            const data = await response.json();
            setFileList(data); // 假设后端返回的文件列表数据结构与 fileList 一致
        } catch (error) {
            message.error('获取文件列表失败');
        }
    };

    return {
        visible,
        handleUpload,
        handleCancel,
        handleOk,
        beforeUpload,
        onChange,
        fileList,
    };
}

// 上传视频的组件
const UploadVideo: React.FC = () => {
    const {
        visible,
        handleUpload,
        handleCancel,
        handleOk,
        beforeUpload,
        onChange,
        fileList,
    } = useVideoUpload();

    return (
        <div>
            <Button type="primary" onClick={handleUpload}>
                <UploadOutlined /> 查看/上传
            </Button>
            <Modal title="上传视频" visible={visible} onOk={handleOk} onCancel={handleCancel}>
                <Upload
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="picture"
                    beforeUpload={beforeUpload}
                    onChange={onChange}
                    fileList={fileList}
                >
                    <Button icon={<UploadOutlined />}>点击上传</Button>
                </Upload>
            </Modal>
        </div>
    );
};

export default UploadVideo;